<template>
  <div class="app-container">
    <div class="designer-wrap">
      <div class="header">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">流程配置</el-menu-item>
          <el-menu-item index="2">流程表单</el-menu-item>
          <el-menu-item index="3">流程设计</el-menu-item>
        </el-menu>
        <div class="publish">
            <el-button size="mini" type="primary" @click="goback"
            >返回</el-button
          >
          <el-button size="mini" type="primary" @click="publish"
            >发布</el-button
          >
        </div>
      </div>
      <div class="content">
        <BasicInfo
          :navable="navable"
          :readable="readable"
          v-show="activeIndex == 1"
        ></BasicInfo>

        <formDesigner :form="formData" v-show="activeIndex == 2" />
        <FlowNode
          :navable="navable"
          :readable="readable"
          v-show="activeIndex == 3"
        ></FlowNode>

        <el-dialog v-model="dialogTableVisible" title="Shipping address">
          {{ nodeData }}
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getStartNode } from "../utils/nodeUtil";
//import formDesigner from "../components/form/formDesigner.vue";
import formDesigner from "../components/FlowDesign/FlowForm/FormIndex.vue";
import BasicInfo from "../components/FlowDesign/BasicInfo/index.vue";
import FlowNode from "../components/FlowDesign/FlowNode/index.vue";
import {
  reactive,
  ref,
  createApp,
  
  
  computed,
  onMounted,
  toRefs,
  watch,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const activeIndex = ref("1");
const dialogTableVisible = ref(false);
const route = useRoute();
//接收父组件传过来的值
const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return getStartNode();
    },
  },
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

import { getFlowDataInfo } from "../api/flow.js";
import {addFlowTemplate} from "../api/flow.js"; 

const { node, navable, readable } = toRefs(props);

const initData = () => {
  let data = {};
  const id = route.query.id;
  console.log("没有id?",id);
  if (id) {
    getFlowDataInfo({ id })
      .then((res) => {
        if (res.status === 0) {
          data.baseSetting = JSON.parse(res.data.baseSetting);
          data.node = JSON.parse(res.data.nodeData);
          data.formData = JSON.parse(res.data.formData);
          store.dispatch("form/updateConfig", JSON.parse(res.data.formData));
          store.dispatch("process/loadDesign", data);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  } else {
    data.baseSetting = {};
    data.node = getStartNode();
    data.formData = {
      config: {},
      list: [],
    };
    store.dispatch("process/loadDesign", data);
  }
};
initData();

const emit = defineEmits(["publish"]);
//定义一个数据
const zoomValue = ref(100);
const zoomStyle = computed(() => {
  return zoomValue.value / 100;
});

const nodeData = computed(() => {
  return store.state.process.node;
});

const formData = computed(() => {
  return store.state.form.config;
});

const baseSetting = computed(() => {
  return store.state.process.baseSetting;
});

const goback = () => {
  route.back;
    // route.go(-1);
}

watch(
  nodeData,
  (newValue, oldValue) => {
    console.log("nodeData---------->改变了");
    console.log("nodeData", newValue);
  },
  { immediate: true }
);

watch(route, (to, from) => {
  console.log("to", to);
  console.log("from", from);
})

//mounted => onMounted
// onMounted(() => {
//   store.dispatch("process/setNode", node.value);
// });

// onMounted(() => {
//   console.log("formData---------->",store.state.selectFormItem)
//   formData.value = store.state.selectFormItem;
// })

// getData() {
//         return this.nodeData;
//       },
const getData = () => {
  return nodeData.value;
};

const toReturn = () => {};

const publish = () => {
  //dialogTableVisible.value = true;
  //baseSetting;
  let data = {
    name: baseSetting.value.flowName,
    remark: baseSetting.value.description,
    imgUrl: baseSetting.value.imageUrl,
    groupId: baseSetting.value.flowGroup,
    nodeData: JSON.stringify(nodeData.value),
    baseSetting: JSON.stringify(baseSetting.value),
    formData: JSON.stringify(formData.value),
  };
   console.log("提交数据结束------------res>", JSON.stringify(nodeData.value));
  // addFlowTemplate(data).then((res) => {
  //   console.log("提交数据结束------------res>", JSON.stringify(res));
  // });
  emit("publish", nodeData.value);
};

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
  activeIndex.value = key;
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 20px;
  .header {
    min-width: 980px;
    position: relative;

    .el-menu {
      top: 0;
      z-index: 999;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .publish {
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 1000;

      i {
        margin-right: 6px;
      }

      button {
        border-radius: 15px;
      }
    }
  }
}
</style>